import React, { useState, useEffect, useRef } from 'react';
import {
  Code,
  Gamepad2,
  Globe,
  Users,
  CheckCircle,
  Send,
  Menu,
  X,
  ExternalLink,
  Calendar,
  Zap,
  Layers,
  ChevronRight,
  Monitor,
  ChevronDown,
  ChevronUp
} from 'lucide-react';

const useOnScreen = (options) => {
  const ref = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setIsVisible(true);
        observer.unobserve(entry.target);
      }
    }, options);

    if (ref.current) observer.observe(ref.current);

    return () => {
      if (ref.current) observer.unobserve(ref.current);
    };
  }, [ref, options]);

  return [ref, isVisible];
};

const FadeIn = ({ children, delay = 0, className = "" }) => {
  const [ref, isVisible] = useOnScreen({ threshold: 0.1 });

  return (
    <div
      ref={ref}
      className={`transition-all duration-1000 ease-out transform ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"} ${className}`}
      style={{ transitionDelay: `${delay}ms` }}
    >
      {children}
    </div>
  );
};

const NavLink = ({ href, children, mobile, onClick }) => (
  <a
    href={href}
    onClick={(e) => { if (onClick) onClick(e); }}
    className={`
      text-slate-400 hover:text-white transition-colors duration-300 text-sm font-medium tracking-wide px-3 py-2 rounded-lg hover:bg-slate-800/50
      ${mobile ? 'block text-lg py-3 border-b border-slate-800 w-full text-center' : ''}
    `}
  >
    {children}
  </a>
);

const SectionTitle = ({ title, subtitle }) => (
  <div className="mb-12">
    <h2 className="text-3xl md:text-4xl font-bold text-white mb-4 tracking-tight">{title}</h2>
    <div className="w-16 h-1 bg-indigo-500 rounded-full mb-4"></div>
    {subtitle && <p className="text-slate-400 max-w-2xl text-lg">{subtitle}</p>}
  </div>
);

function setFavicon(href) {
  if (!href) return;
  let link = document.querySelector("link[rel~='icon']");
  if (!link) {
    link = document.createElement("link");
    link.rel = "icon";
    document.head.appendChild(link);
  }
  link.href = href;
}

function fmt(n) {
  const x = Number(n);
  if (!Number.isFinite(x)) return "—";
  return x.toLocaleString();
}

function imgPath(key) {
  return `/mainFolder/Images/${key}`;
}

const ExpandableGrid = ({ title, items, type, totals }) => {
  const [expanded, setExpanded] = useState(false);
  const visibleItems = expanded ? items : items.slice(0, 3);

  return (
    <div className="mb-16">
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-6">
        <h3 className="text-xl font-bold text-white flex items-center gap-3">
          {type === 'community' && <Users className="text-indigo-500" />}
          {type === 'website' && <Globe className="text-indigo-500" />}
          {type === 'game' && <Gamepad2 className="text-indigo-500" />}
          {title}
        </h3>

        {type === "game" && totals && (
          <div className="flex flex-wrap gap-2 text-xs">
            <span className="px-2 py-1 rounded bg-slate-800 text-slate-200">Total CCU: {fmt(totals.totalCcu)}</span>
            <span className="px-2 py-1 rounded bg-slate-800 text-slate-200">Total Visits: {fmt(totals.totalVisits)}</span>
          </div>
        )}

        {type === "community" && totals && (
          <div className="flex flex-wrap gap-2 text-xs">
            <span className="px-2 py-1 rounded bg-slate-800 text-slate-200">Total Members: {fmt(totals.totalGroupMembers)}</span>
          </div>
        )}
      </div>

      <div className="grid gap-6 grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
        {visibleItems.map((item, idx) => (
          <div key={idx} className="group bg-slate-900/50 border border-slate-800 rounded-xl overflow-hidden hover:border-indigo-500/50 transition-all duration-300">
            {(type === 'community' || type === 'website' || type === 'game') && (
              <div className="p-6 flex items-center gap-4">
                <div className="h-12 w-12 rounded-full bg-slate-800 overflow-hidden flex items-center justify-center">
                  {item.iconUrl ? (
                    <img src={item.iconUrl} alt="" className="h-full w-full object-cover" />
                  ) : (
                    <div className="text-indigo-400">
                      {type === 'community' && <Users size={24} />}
                      {type === 'website' && <Globe size={24} />}
                      {type === 'game' && <Gamepad2 size={24} />}
                    </div>
                  )}
                </div>

                <div className="min-w-0 flex-1">
                  <h4 className="text-white font-bold truncate">{item.name}</h4>

                  <div className="mt-1 flex flex-wrap items-center gap-2">
                    {item.badge && (
                      <span className="text-xs font-bold px-2 py-0.5 rounded bg-indigo-500/20 text-indigo-300 inline-block">
                        {item.badge}
                      </span>
                    )}

                    {type === "community" && Number.isFinite(Number(item.memberCount)) && (
                      <span className="text-xs px-2 py-0.5 rounded bg-slate-800 text-slate-300">
                        Members: {fmt(item.memberCount)}
                      </span>
                    )}

                    {type === "game" && (
                      <>
                        <span className="text-xs px-2 py-0.5 rounded bg-slate-800 text-slate-300">
                          CCU: {fmt(item.playing)}
                        </span>
                        <span className="text-xs px-2 py-0.5 rounded bg-slate-800 text-slate-300">
                          Visits: {fmt(item.visits)}
                        </span>
                        <span className="text-xs px-2 py-0.5 rounded bg-slate-800 text-slate-300">
                          Rating: {item.ratingPercent == null ? "—" : `${item.ratingPercent}%`}
                        </span>
                      </>
                    )}
                  </div>
                </div>

                {item.href && (
                  <a
                    href={item.href}
                    target="_blank"
                    rel="noreferrer"
                    className="shrink-0 p-2 rounded-lg bg-slate-800 hover:bg-slate-700 transition-colors"
                    title="Open"
                  >
                    <ExternalLink size={16} className="text-slate-200" />
                  </a>
                )}
              </div>
            )}
          </div>
        ))}
      </div>

      {items.length > 3 && (
        <button
          onClick={() => setExpanded(!expanded)}
          className="mt-6 text-sm font-bold text-indigo-400 hover:text-indigo-300 flex items-center gap-1 transition-colors"
        >
          {expanded ? 'View Less' : 'View All'}
          {expanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
        </button>
      )}
    </div>
  );
};

export default function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  const [formData, setFormData] = useState({
    discord: '',
    summary: '',
    type: 'New Game',
    deadline: ''
  });

  const [formStatus, setFormStatus] = useState('idle');
  const [formErrors, setFormErrors] = useState({});

  const [api, setApi] = useState({
    games: [],
    groups: [],
    websites: [],
    totals: { totalCcu: 0, totalVisits: 0, totalGroupMembers: 0 }
  });

  const WORKER_BASE = "";

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    document.title = "savhana";
    setFavicon(imgPath("WebsiteIcon"));
  }, []);

  useEffect(() => {
    let cancelled = false;

    async function load() {
      try {
        const r = await fetch(`${WORKER_BASE}/api/summary`, { headers: { accept: "application/json" } });
        const d = await r.json();

        if (!cancelled && d && d.ok) {
          const groups = (d.groups || []).map(g => ({
            name: g.name || `Group ${g.groupId}`,
            badge: g.role || "",
            memberCount: g.memberCount,
            iconUrl: g.icon || null,
            href: `https://www.roblox.com/communities/${g.groupId}`
          }));

          const games = (d.games || []).map(g => ({
            name: g.title || `Game ${g.placeId}`,
            badge: "Live",
            playing: g.playing,
            visits: g.visits,
            ratingPercent: g.ratingPercent,
            iconUrl: g.icon || null,
            href: `https://www.roblox.com/games/${g.placeId}`
          }));

          const websites = (d.websites || []).map(w => ({
            name: w.name,
            badge: w.role || "",
            iconUrl: imgPath(w.iconKey || "SvStudios"),
            href: w.url
          }));

          setApi({
            games,
            groups,
            websites,
            totals: d.totals || { totalCcu: 0, totalVisits: 0, totalGroupMembers: 0 }
          });
        }
      } catch {}
    }

    load();
    const t = setInterval(load, 60_000);

    return () => {
      cancelled = true;
      clearInterval(t);
    };
  }, []);

  const handleInputChange = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    if (formErrors[field]) {
      const newErrors = { ...formErrors };
      if (field === 'discord' && value.trim().length > 0) delete newErrors.discord;
      if (field === 'summary' && value.length >= 100) delete newErrors.summary;
      if (field === 'deadline' && value.trim().length > 0) delete newErrors.deadline;
      setFormErrors(newErrors);
    }
  };

  const validateForm = () => {
    const errors = {};
    if (!formData.discord.trim()) errors.discord = "Discord username is required";
    if (formData.summary.length < 100) errors.summary = "Summary must be at least 100 characters";
    if (!formData.deadline.trim()) errors.deadline = "Date is required";
    return errors;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const errors = validateForm();
    if (Object.keys(errors).length > 0) {
      setFormErrors(errors);
      return;
    }

    setFormErrors({});
    setFormStatus('submitting');

    try {
      const token = window.turnstile ? await new Promise((resolve) => {
        window.turnstile.render("#ts", {
          sitekey: window.__TURNSTILE_SITEKEY || "",
          callback: (t) => resolve(t),
          "error-callback": () => resolve("")
        });
      }) : "";

      const r = await fetch(`${WORKER_BASE}/api/apply`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ ...formData, turnstileToken: token })
      });

      const d = await r.json().catch(() => null);
      if (d && d.ok) {
        setFormStatus('success');
        setFormData({ discord: '', summary: '', type: 'New Game', deadline: '' });
        setTimeout(() => setFormStatus('idle'), 3000);
      } else {
        setFormStatus('idle');
      }
    } catch {
      setFormStatus('idle');
    }
  };

  const remainingChars = 100 - formData.summary.length;

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans selection:bg-indigo-500/30 selection:text-indigo-200">
      <style>{`html { scroll-behavior: smooth; }`}</style>

      <div className="fixed inset-0 z-0 pointer-events-none">
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-indigo-600/10 rounded-full blur-3xl"></div>
        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl"></div>
      </div>

      <nav className="fixed top-0 left-0 right-0 z-50 flex justify-center py-6 pointer-events-none">
        <div className={`
          pointer-events-auto
          relative flex items-center gap-1 md:gap-4 px-4 pl-6 py-2 rounded-full
          bg-slate-900/80 backdrop-blur-xl border border-white/10 shadow-2xl shadow-black/50
          transition-all duration-300 transform
          ${scrolled ? 'scale-95 bg-slate-950/90 border-slate-800 mt-2' : 'scale-100'}
        `}>
          <a href="#home" className="flex items-center gap-2 text-xl font-bold text-white tracking-tighter hover:text-indigo-400 transition-colors mr-2">
            <img src={imgPath("SiteLogo")} alt="" className="h-6 w-6 rounded object-cover" />
            savhana
          </a>

          <div className="hidden md:flex items-center gap-1 border-l border-slate-800 pl-4 h-6">
            <NavLink href="#home">Home</NavLink>
            <NavLink href="#work">Work & Affiliations</NavLink>
            <NavLink href="#contact">Contact</NavLink>
          </div>

          <div className="hidden md:block pl-2">
            <a
              href="#request"
              className="px-5 py-2.5 bg-gradient-to-r from-indigo-600 to-indigo-500 hover:from-indigo-500 hover:to-indigo-400 text-white text-sm font-bold rounded-full transition-all hover:scale-105 shadow-lg shadow-indigo-500/25 flex items-center gap-2"
            >
              Request <Send size={14} />
            </a>
          </div>

          <button className="md:hidden ml-4 p-2 text-white bg-slate-800 rounded-full" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X size={18} /> : <Menu size={18} />}
          </button>

          {isMenuOpen && (
            <div className="absolute top-full left-1/2 -translate-x-1/2 mt-4 w-64 bg-slate-900/95 backdrop-blur-xl border border-slate-700 rounded-2xl p-4 flex flex-col shadow-2xl origin-top animate-in fade-in zoom-in-95 duration-200">
              <NavLink href="#home" mobile onClick={() => setIsMenuOpen(false)}>Home</NavLink>
              <NavLink href="#work" mobile onClick={() => setIsMenuOpen(false)}>Work</NavLink>
              <NavLink href="#request" mobile onClick={() => setIsMenuOpen(false)}>Request</NavLink>
              <NavLink href="#contact" mobile onClick={() => setIsMenuOpen(false)}>Contact</NavLink>
            </div>
          )}
        </div>
      </nav>

      <section id="home" className="relative z-10 min-h-screen flex items-center justify-center pt-24">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <FadeIn>
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-sm font-medium border border-indigo-500/20 mb-6">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
              </span>
              Accepting Commissions
            </div>
          </FadeIn>

          <FadeIn delay={100}>
            <h1 className="text-5xl md:text-7xl font-extrabold text-white mb-6 leading-tight tracking-tight">
              Roblox <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">Scripter</span>
            </h1>
          </FadeIn>

          <FadeIn delay={200}>
            <p className="text-lg md:text-xl text-slate-400 mb-8 max-w-2xl mx-auto leading-relaxed">
              Professional, modular, and optimized Luau programming. Over 6 years of experience delivering high-quality systems with fast turnaround times.
            </p>
          </FadeIn>

          <FadeIn delay={300}>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <a href="#request" className="w-full sm:w-auto px-8 py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg shadow-indigo-600/25 flex items-center justify-center gap-2">
                Start a Project <ChevronRight size={18} />
              </a>
              <a href="#work" className="w-full sm:w-auto px-8 py-3 bg-slate-900 border border-slate-700 hover:border-slate-500 text-white font-medium rounded-lg transition-all duration-300 flex items-center justify-center">
                View Work
              </a>
            </div>
          </FadeIn>
        </div>
      </section>

      <section id="about" className="py-24 relative z-10">
        <div className="max-w-6xl mx-auto px-6">
          <FadeIn>
            <div className="grid md:grid-cols-2 gap-12 items-center">
              <div>
                <SectionTitle title="About Me" subtitle="Dedicated to clean code and player experience." />
                <div className="space-y-6 text-slate-300 leading-relaxed">
                  <p>
                    I am a fast, reliable scripter with over <strong className="text-white">6+ years</strong> active in the Roblox developer community. My focus is on writing code that isn't just functional, but scalable and easy to maintain.
                  </p>
                  <p>
                    I specialize in modular architecture, meaning the systems I build for you are easy to import, configure, and expand upon. Whether you need complex backend data stores or responsive UI interactions, I ensure optimization is a priority to keep your game running smoothly.
                  </p>

                  <div className="grid grid-cols-2 gap-4 mt-8">
                    <div className="p-4 bg-slate-900/50 rounded-lg border border-slate-800">
                      <div className="text-indigo-400 font-bold text-2xl mb-1">6+</div>
                      <div className="text-sm text-slate-500">Years Experience</div>
                    </div>
                    <div className="p-4 bg-slate-900/50 rounded-lg border border-slate-800">
                      <div className="text-indigo-400 font-bold text-2xl mb-1">Fast</div>
                      <div className="text-sm text-slate-500">Turnaround</div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-1 gap-4">
                {[
                  { icon: Zap, title: "Optimized Performance", desc: "Lag-free code practices" },
                  { icon: Layers, title: "Modular Architecture", desc: "Easy to edit & expand" },
                  { icon: Monitor, title: "Owner of SV Studios", desc: "svstudiosinfo.com" },
                  { icon: Users, title: "Community Leader", desc: "Group Owner & Manager" },
                ].map((item, idx) => (
                  <div key={idx} className="flex items-start gap-4 p-4 rounded-xl bg-slate-900 border border-slate-800 hover:border-indigo-500/30 transition-colors">
                    <div className="p-2 bg-slate-800 rounded-lg text-indigo-400">
                      <item.icon size={20} />
                    </div>
                    <div>
                      <h4 className="font-bold text-white text-sm">{item.title}</h4>
                      <p className="text-slate-500 text-sm">{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      <section id="work" className="py-24 bg-slate-900/30 relative z-10 border-y border-slate-900">
        <div className="max-w-6xl mx-auto px-6">
          <FadeIn>
            <SectionTitle title="Work & Affiliations" subtitle="A breakdown of my communities, websites, and games." />
          </FadeIn>

          <FadeIn delay={100}>
            <ExpandableGrid title="Communities" items={api.groups} type="community" totals={api.totals} />
          </FadeIn>

          <FadeIn delay={200}>
            <ExpandableGrid title="Websites" items={api.websites} type="website" />
          </FadeIn>

          <FadeIn delay={300}>
            <ExpandableGrid title="Games" items={api.games} type="game" totals={api.totals} />
          </FadeIn>
        </div>
      </section>

      <section id="rates" className="py-24 relative z-10">
        <div className="max-w-4xl mx-auto px-6">
          <FadeIn>
            <SectionTitle title="Pricing" />

            <div className="relative p-8 rounded-2xl bg-gradient-to-b from-slate-900 to-slate-950 border border-slate-800 overflow-hidden">
              <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/10 blur-3xl rounded-full"></div>

              <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 mb-8">
                <div>
                  <h3 className="text-2xl font-bold text-white flex items-center gap-2">
                    <Code className="text-indigo-500" /> Scripting Services
                  </h3>
                  <p className="text-slate-400 mt-2 max-w-md">
                    Full system implementation, bug fixes, UI programming, and backend data management.
                  </p>
                </div>
                <div className="text-right w-full md:w-auto p-4 bg-slate-900 rounded-xl border border-slate-800">
                  <div className="text-3xl font-bold text-white">$30 – $45 <span className="text-lg text-slate-500 font-normal">/hr</span></div>
                  <div className="text-emerald-400 font-medium text-sm mt-1 flex items-center justify-end gap-1">
                    R$ 9,000 – R$ 12,000 /hr
                  </div>
                </div>
              </div>

              <div className="grid md:grid-cols-2 gap-4">
                {[
                  "Clean, Annotated Code",
                  "Modular Systems",
                  "DataStore Security",
                  "UI Animation & Logic",
                  "Server-Client Optimization",
                  "Bug Free"
                ].map((feat, i) => (
                  <div key={i} className="flex items-center gap-3 text-slate-300">
                    <CheckCircle size={16} className="text-indigo-500" />
                    <span>{feat}</span>
                  </div>
                ))}
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      <section id="request" className="py-24 bg-slate-900/30 relative z-10 border-t border-slate-900">
        <div className="max-w-xl mx-auto px-6">
          <FadeIn>
            <div className="text-center mb-10">
              <h2 className="text-3xl font-bold text-white mb-2">Request a Commission</h2>
              <p className="text-slate-400">Please fill out the details below accurately.</p>
            </div>

            <form onSubmit={handleSubmit} className="bg-slate-950 p-8 rounded-2xl border border-slate-800 shadow-xl relative overflow-hidden">
              <div className="space-y-6 relative z-10">
                <div>
                  <label className="block text-sm font-medium text-slate-300 mb-2">
                    Discord Username <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    placeholder="username (no tags)"
                    value={formData.discord}
                    onChange={(e) => handleInputChange('discord', e.target.value)}
                    className={`w-full bg-slate-900 border ${formErrors.discord ? 'border-red-500' : 'border-slate-700'} rounded-lg py-3 px-4 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500 transition-colors`}
                  />
                  {formErrors.discord && <p className="text-red-500 text-xs mt-1">{formErrors.discord}</p>}
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-slate-300 mb-2">Project Type</label>
                    <select
                      value={formData.type}
                      onChange={(e) => handleInputChange('type', e.target.value)}
                      className="w-full bg-slate-900 border border-slate-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-indigo-500 appearance-none cursor-pointer"
                    >
                      <option>New Game</option>
                      <option>System Implementation</option>
                      <option>UI Scripting</option>
                      <option>Bug Fixes</option>
                      <option>Optimization</option>
                      <option>DataStore/Backend</option>
                      <option>Other</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-300 mb-2">Deadline (DD/MM/YYYY) <span className="text-red-500">*</span></label>
                    <div className="relative">
                      <Calendar size={16} className="absolute left-3 top-3.5 text-slate-500" />
                      <input
                        type="text"
                        placeholder="25/12/2026"
                        value={formData.deadline}
                        onChange={(e) => handleInputChange('deadline', e.target.value)}
                        className={`w-full bg-slate-900 border ${formErrors.deadline ? 'border-red-500' : 'border-slate-700'} rounded-lg py-3 pl-10 pr-4 text-white focus:outline-none focus:border-indigo-500 transition-colors`}
                      />
                    </div>
                    {formErrors.deadline && <p className="text-red-500 text-xs mt-1">{formErrors.deadline}</p>}
                  </div>
                </div>

                <div>
                  <div className="flex justify-between items-center mb-2">
                    <label className="block text-sm font-medium text-slate-300">
                      Job Summary <span className="text-red-500">*</span>
                    </label>
                    <span className={`text-xs ${remainingChars > 0 ? 'text-amber-500' : 'text-emerald-500'}`}>
                      {remainingChars > 0 ? `${remainingChars} more chars needed` : 'Length OK'}
                    </span>
                  </div>
                  <textarea
                    rows="5"
                    value={formData.summary}
                    onChange={(e) => handleInputChange('summary', e.target.value)}
                    placeholder="Describe exactly what needs to be scripted..."
                    className={`w-full bg-slate-900 border ${formErrors.summary ? 'border-red-500' : 'border-slate-700'} rounded-lg py-3 px-4 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500 transition-colors resize-none`}
                  ></textarea>
                  {formErrors.summary && <p className="text-red-500 text-xs mt-1">{formErrors.summary}</p>}
                </div>

                <div id="ts" className="hidden" />

                <button
                  disabled={formStatus !== 'idle' && formStatus !== 'success'}
                  type="submit"
                  className={`
                    w-full py-4 rounded-lg font-bold text-white transition-all duration-500 flex items-center justify-center gap-2
                    ${formStatus === 'idle' ? 'bg-indigo-600 hover:bg-indigo-500' : ''}
                    ${formStatus === 'submitting' ? 'bg-indigo-800 cursor-wait' : ''}
                    ${formStatus === 'success' ? 'bg-emerald-500' : ''}
                  `}
                >
                  {formStatus === 'idle' && <>Submit Request <Send size={18} /></>}
                  {formStatus === 'submitting' && <span className="animate-pulse">Sending...</span>}
                  {formStatus === 'success' && <>Request Sent <CheckCircle size={18} /></>}
                </button>
              </div>
            </form>
          </FadeIn>
        </div>
      </section>

      <footer id="contact" className="py-12 bg-slate-950 border-t border-slate-900">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <h2 className="text-2xl font-bold text-white mb-8">Contact Me</h2>

          <div className="flex flex-col sm:flex-row justify-center gap-6 mb-12">
            <a
              href="https://discord.com/users/425058974157766659"
              target="_blank"
              rel="noreferrer"
              className="flex items-center justify-center gap-3 px-6 py-4 bg-slate-900 border border-slate-800 hover:border-slate-600 text-white rounded-lg font-medium transition-colors"
            >
              <img src={imgPath("DiscordInfo")} alt="" className="h-5 w-5" />
              Discord Profile
            </a>
            <a
              href="https://www.roblox.com/users/435765/profile"
              target="_blank"
              rel="noreferrer"
              className="flex items-center justify-center gap-3 px-6 py-4 bg-slate-900 border border-slate-800 hover:border-slate-600 text-white rounded-lg font-medium transition-colors"
            >
              <img src={imgPath("RobloxInfo")} alt="" className="h-5 w-5" />
              Roblox Profile
            </a>
          </div>

          <div className="flex items-center justify-between text-slate-600 text-sm">
            <div className="flex items-center gap-2">
              <img src={imgPath("SiteLogo")} alt="" className="h-5 w-5 rounded object-cover" />
              <p>&copy; 2026 savhana.</p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}